<template>
	<div>
		<canvas width="200" height="200" id="canvas"	ref="canvas"></canvas>
	</div>
</template>
<script type="text/javascript">
	import { Game, GameObject, resource, RESOURCE_TYPE, LOAD_EVENT	} from '@eva/eva.js'
	import { RendererSystem } from '@eva/plugin-renderer'
	import { DragonBone, DragonBoneSystem } from '@eva/plugin-renderer-dragonbone'
	export default{
		name: 'EvajsStudyShowDragonBone',
		data(){
			return {
				percent: 0,
				game: null
			}
		},
		created(){
			this.$nextTick(()=>{
				this.loadResource()
			})
		},
		destroyed(){
			if(this.game){
				this.game.destroy()
			}
		},
		methods:{
			loadResource(){
				resource.addResource([
					{
						name: 'dragonbone',
						type: RESOURCE_TYPE.DRAGONBONE,
						src: {
							image: {
								type: 'png',
								url: '/images/TB1RIpUBhn1gK0jSZKPXXXvUXXa-1024-1024.png'
							},
							tex: {
								type: 'json',
								url: '/json/fb18baf3a1af41a88f9d1a4426d47832.json'
							},
							ske: {
								type: 'json',
								url: '/json/c904e6867062e21123e1a44d2be2a0bf.json'
							}
						},
						preload: true
					}
				]);
				resource.preload();
				// 开始loader
				resource.on(LOAD_EVENT.START, e => {
					console.log('开始加载', e);
				}); 
				// 加载进度更新
				resource.on(LOAD_EVENT.PROGRESS, e => {
					console.log('进度监听', e);
				}); 
				// 某文件加载成功
				resource.on(LOAD_EVENT.LOADED, e => {
					console.log('某文件加载成功', e);
				}); 
				// 加载进度更新
				resource.on(LOAD_EVENT.COMPLETE, e => {
					console.log('完成', e);
					this.showDragonBone()
				}); 
				// 加载错误
				resource.on(LOAD_EVENT.ERROR, e => {
					console.log('错误', e);
				}); 
			},
			showDragonBone(){
				// 创建游戏
				this.game = new Game({
					systems: [ // 游戏添加渲染系统
						new RendererSystem({
							canvas: this.$refs.canvas,
							width: 750,
							height: 500,
							backgroundColor: 0x101010
						}),
						// 游戏精灵系统
						new DragonBoneSystem(),
					],
				});
				// 此处还在考虑如何设置默认场景的宽高
				this.game.scene.transform.size = {
					width: 750,
					height: 500
				}

				// dragonbone 的 origin 是失效的，将会按照dragonbone设计时的坐标重点定位
				const dragonBone = new GameObject('db', {
					anchor: {
						x: 0.5,
						y: 0.5,
					},
				});

				const db = dragonBone.addComponent(
					new DragonBone({
						resource: 'dragonbone',
						armatureName: 'armatureName',
					}),
				);

				db.play('newAnimation');
				this.game.scene.addChild(dragonBone);
			}
		}
	}
</script>